<template>
    <div class="cell-content-map">
        <van-overlay :show="loading"/>
        <div
                class="cell-content-map-input cell-content-map-input-flex"
                v-if="TransferFlag == 1"
        >
            <div class="cell-content-map-input-value">
                <div style="position: absolute;top:-8px;">入库位</div>
                <van-cell-group>
                    <van-field v-model="value1" placeholder="请输入库位"/>
                </van-cell-group>
            </div>
            <div class="cell-content-map-input-img">
                <img src="@/assets/images/arrow.png"/>
            </div>
            <div class="cell-content-map-input-value">
                <div style="position: absolute;top:-8px;">出库位</div>
                <van-cell-group>
                    <van-field v-model="value2" placeholder="请输入库位"/>
                </van-cell-group>
            </div>
            <div>
                <van-button type="info" size="small" @click="sumbit">提交</van-button>
            </div>
        </div>
        <div>
            <van-button type="info" size="small" color="#007979" style="margin-right:10px;margin-left: 10px" @click="agvStart">启动</van-button>
            <van-button type="info" size="small" color="#FF5151" style="margin-right:10px;" @click="agvGetPower">充电</van-button>
            <van-button type="info" size="small"  color="#0000E3" style="margin-right:10px;" @click="agvMove">移动</van-button>
            <van-button type="info" size="small" color="#E1E100" style="margin-right:10px;" @click="agvStop">停止</van-button>
            <van-button type="info" size="small" color="#AE57A4" style="margin-right:10px;" @click="agvSuSpend">暂停</van-button>

        </div>
        <div class="cell-content">
            <div class="cell-content-one clearfix">
                <div
                        class="one-column one-column-border"
                        :style="{ borderLeft: index == 0 ? '0px' : 'solid 1px #ddd' }"
                        @click="showInstructionInfo(item.name,item.title)"
                        v-for="(item, index) in shelfInfo.R1C"
                >
                    <div
                            class="one-column-content "
                            :style="{ background: item.color == '2' ? 'yellow' : '#A9A9A9' }"
                    >
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <div class="cell-content-two clearfix" style="background: #07c160;">
                过道
            </div>
            <div class="cell-content-three clearfix">
                <div class="three-column-content">
                    <div class="three-column">
                        <div
                                class="three-column-row"
                                :style="{
                background: shelfInfo.R1B[0].color == '2' ? 'yellow' : '#A9A9A9'
              }"
                                @click="showInstructionInfo(shelfInfo.R1B[0].name,shelfInfo.R1B[0].title )"
                        >
                            {{ shelfInfo.R1B[0].title }}
                        </div>
                        <div
                                class="three-column-row"
                                style="background: #acf45e85;"
                                @click="showInstructionInfo('R1-A-1','A1区')"
                        >
                            <!--A1-->
                        </div>
                        <div
                                class="three-column-row"
                                style="background: #acf45e85;z-index: 999;border: 0px;"
                        >
                            样板间
                        </div>
                    </div>
                    <div class="three-column">
                        <div class="three-column-row-two">过道</div>
                    </div>
                    <div class="three-column column-width">
                        <div class="three-column-row" style="border-right:0px;">
                            <div
                                    class="three-column-row-eight"
                                    :style="{ background: '#07c160' }"
                            >
                                <!--R1-B-02-->
                                <!--R1-A-in-->
                            </div>
                            <div
                                    class="three-column-row-eight"
                                    @click="showInstructionInfo(item1.name,item1.title)"
                                    v-for="(item1, index) in shelfInfo.R1B"
                                    v-if="index > 0"
                                    :style="{
                  background: item1.color == '2' ? 'yellow' : '#A9A9A9'
                }"
                            >
                                {{ item1.title }}
                            </div>
                        </div>
                        <div class="three-column-row-three" style="border-right:0px;">
                            <div class="three-row-one" style="width: 16%">
                                <div class="in-out" @click="showInstructionInfo('R1-A-out','出库位')"
                                     style="text-align: center">
                                    出库位
                                </div>
                                <div
                                        :style="{ height: '50%',textAlign:'center' }"
                                        @click="showInstructionInfo('R1-A-in','入库位')"
                                >
                                    入库位
                                </div>
                            </div>
                            <div
                                    class="three-row-three"
                                    style="background:#5693EF;align-items: unset;flex-wrap: wrap;width: 67%"
                                    @click="showAVG"
                            >
                                <div style="width: 100%;text-align: center">AGV区域</div>
                                <div class="agv-congent">
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                    <div class="avg-bar"></div>
                                </div>

                            </div>
                            <div class="three-row-three " style="border-right:0px;">
                                <div
                                        class="three-row-three-content"
                                        v-for="(item2, index) in shelfInfo.R1A"
                                        :style="{
                    background: item2.color == '2' ? 'yellow' : '#A9A9A9'
                  }"
                                        @click="showInstructionInfo(item2.name,item2.title )"
                                >
                                    {{ item2.title }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell-content-two clearfix">
                <div class="left-div"></div>

                <div class="right-div">
                    过道
                    <div class="open-door">
                        大门
                    </div>
                </div>
                <!--<div class="in-div" @click="showInstructionInfo('R1-A-IN')"> IN</div>-->
            </div>
            <div
                    class="cell-content-two clearfix"
                    style="margin-top: 30px;height: 90px;line-height: 100px;"
                    :style="{ background: item3.color == '2' ? 'yellow' : '#A9A9A9' }"
                    v-for="item3 in shelfInfo.R1D"
                    @click="showInstructionInfo(item3.name,item3.title)"
            >
                {{ item3.title }}
                <!--<div class="in-div" @click="showInstructionInfo('R1-A-IN')"> IN</div>-->
            </div>
        </div>
        <van-action-sheet
                v-model="show"
                title="货架详情"
                cancel-text="移库"
                @cancel="moveItem()"
        >
            <div class="action-sheet-table">
                <table>
                    <thead>
                    <tr>
                        <th>物资编码</th>
                        <th>物资名称</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in tableDate">
                        <td>{{ item.itemid }}</td>
                        <td>{{ item.description }}</td>
                        <td>{{ item.spec }}</td>
                        <td>{{ item.unitid }}</td>
                        <td>{{ item.qtyOnhand }}</td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
    import {
        getItemByLocationid,
        getLocation,
        getAllLocation,
        moveLocation
    } from "@/api/goodLocation.js";
    import {
        getPower,moveAGV,startAGV,stopAGV,suspendAGV
    } from "@/api/Invtask.js";
    import {Dialog, Toast} from "vant";
    import {Overlay} from "vant";
    export default {
        name: "Map",
        props: {
            TransferFlag: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                currentStatus: 0,
                itemId: "",
                value1: "",
                value2: "",
                show: false,
                loading: false,
                tableDate: [],
                shelfInfo: {
                    R1A: [
                        {
                            title: "A7区",
                            name: "R1-A-07",
                            color: "#ddd"
                        },
                        {
                            title: "A8区",
                            name: "R1-A-08",
                            color: "#ddd"
                        },
                        {
                            title: "A9区",
                            name: "R1-A-09",
                            color: "#ddd"
                        }
                    ],
                    R1B: [
                        {
                            title: "B1区",
                            name: "R1-B-01",
                            color: "#ddd"
                        },
                        {
                            title: "B3区",
                            name: "R1-B-03",
                            color: "#ddd"
                        },
                        {
                            title: "B4区",
                            name: "R1-B-04",
                            color: "#ddd"
                        },
                        {
                            title: "B5区",
                            name: "R1-B-05",
                            color: "#ddd"
                        },
                        {
                            title: "B6区",
                            name: "R1-B-06",
                            color: "#ddd"
                        },
                        {
                            title: "B7区",
                            name: "R1-B-07",
                            color: "#ddd"
                        },
                        {
                            title: "B8区",
                            name: "R1-B-08",
                            color: "#ddd"
                        },
                        {
                            title: "B9区",
                            name: "R1-B-08",
                            color: "#ddd"
                        }
                    ],
                    R1C: [
                        {
                            title: "C1区",
                            name: "R1-C-01",
                            color: "yellow"
                        },
                        {
                            title: "C2区",
                            name: "R1-C-02",
                            color: "#ddd"
                        },
                        {
                            title: "C3区",
                            name: "R1-C-03",
                            color: "#ddd"
                        },
                        {
                            title: "C4区",
                            name: "R1-C-04",
                            color: "#ddd"
                        },
                        {
                            title: "C5区",
                            name: "R1-C-05",
                            color: "#ddd"
                        },
                        {
                            title: "C6区",
                            name: "R1-C-06",
                            color: "#ddd"
                        },
                        {
                            title: "C7区",
                            name: "R1-C-07",
                            color: "#ddd"
                        },
                        {
                            title: "C8区",
                            name: "R1-C-08",
                            color: "#ddd"
                        },
                        {
                            title: "C9区",
                            name: "R1-C-09",
                            color: "#ddd"
                        }
                    ],
                    R1D: [
                        {
                            title: "D区",
                            name: "R1-D",
                            color: "#FFF"
                        }
                    ],
                    RIN: [
                        {
                            title: "出库区",
                            name: "R1-A-OUT",
                            color: "#FFF"
                        }
                    ],
                    ROUT: [
                        {
                            title: "入库区",
                            name: "R1-A-IN",
                            color: "#FFF"

                        }
                    ]
                }
            };
        },
        methods: {
            agvStart(){
                startAGV().then(res => {
                    // console.info(res.data[1]);
                    Toast("AGV启动成功");
                });
            },
            agvGetPower(){
                getPower().then(res => {
                    // console.info(res.data[1]);
                    Toast("AGV充电成功");
                });
            },
            agvMove(){
                moveAGV().then(res => {
                    // console.info(res.data[1]);
                    Toast("AGV移动成功");
                });
            },
            agvStop(){
                stopAGV().then(res => {
                    // console.info(res.data[1]);
                    Toast("AGV停止成功");
                });
            },
            agvSuSpend(){
                suspendAGV().then(res => {
                    // console.info(res.data[1]);
                    Toast("AGV暂停成功");
                });
            },
            showInstructionInfo(id, title) {
                if (id == "R1-A-out" || id == "R1-A-in") {
                    this.$router.push({
                        path: "/order/info",
                        query: {
                            id: id,
                            title: title,
                            value1: this.value1,
                            value2: this.value2
                        }
                    });
                    return;
                } else {
                    this.getItemByLocationid(id);
                }
            },
            showAVG() {
                this.$router.push({
                    path: "/order/info/avg",
                    query: {
                        value1: this.value1,
                        value2: this.value2
                    }
                });
            },
            sumbit() {
                this.$emit("update:TransferFlag", 0);
                var empid = this.$store.logininfo.empid;
                this.loading = true;
                moveLocation(empid, this.value1, this.value2).then(res => {
                    this.value1 = "";
                    this.value2 = "";
                    this.loading = false;
                    Dialog.alert({
                        title: "消息",
                        message: "移库成功"
                    }).then(() => {
                        // on close
                    });
                    // if (res.data!=null) {
                    //     this.shelfInfo = res.data;
                    // }
                });
            },
            getAllLocation() {
                getAllLocation().then(res => {
                    // console.info(res.data[1]);
                    console.dir(res.data);
                    if (res.data != null) {
                        this.shelfInfo = res.data;
                    }
                });
            },
            getItemByLocationid(id) {
                console.info(id);
                getItemByLocationid(id).then(res => {
                    // console.info(res.data[0]);
                    if (res.data != null) {
                        this.tableDate = res.data;
                        this.currentStatus = 1;
                    } else {
						this.tableDate =[];
                        this.currentStatus = 0;
                    }
                    this.itemId = id;
                    this.show = true;
                });
            },
            moveItem() {
                this.show = false;
                console.info(this.itemId);
                if (this.currentStatus == 1) {
                    this.value1 = this.itemId;
                } else if (this.currentStatus == 0) {
                    this.value2 = this.itemId;
                }
                this.$emit("update:TransferFlag", 1);
            }
        },
        created() {
            if (this.$route.query.value1 != null) {
                this.value1 = this.$route.query.value1;
                this.$emit("update:TransferFlag", 1);
            }
            if (this.$route.query.value2 != null) {
                this.value2 = this.$route.query.value2;
                this.$emit("update:TransferFlag", 1);
            }
            this.getAllLocation();
        }
    };
</script>

<style scoped lang="scss">
    .color1 {
        background-color: yellow;
    }

    .color2 {
        background-color: green;
    }

    .action-sheet-table {
        padding: 10px;
        max-height: 300px;
        overflow-y: auto;
        table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }
        table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
        table td,
        table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }
    }

    .cell-content-map {
        position: relative;
        width: 100%;
        .cell-content-map-input {
            position: relative;
            width: 100%;
            padding: 10px 10px 0 10px;
            .cell-content-map-input-value {
                width: 30%;
            }
            .cell-content-map-input-img {
                width: 55px;
                height: 20px;
                img {
                    height: 100%;
                    width: 100%;
                }
            }
        }
        .cell-content-map-input-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .cell-content {
        /*padding: 10px;*/
        position: relative;
        /*width: 100%;*/
        /*height: 260px;*/
        border: solid 1px #ddd;
        margin: 10px;
        background: #fff;
        /*border-radius: 4px;*/
        .cell-content-one {
            position: relative;

            text-align: center;
            /*font-weight: bold;*/
            font-size: 14px;
            color: #fff;
            display: flex;
            width: 100%;
            /*line-height: 120px;*/
            /*cursor: pointer;*/
            .one-column {
                width: (100% / 9);
                height: 0px;
                border: solid 1px #ddd;
                border-right: 0px;
                background: #acf45e85;
                /*display: inline-block;*/
                padding-bottom: (100% / 9);
                font-size: 14px;
                /*font-weight: bold;*/
                color: #000;
                display: flex;
                justify-content: center;
                align-items: center;
                background-size: contain;
                position: relative;
                .one-column-content {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    justify-content: center; //子元素水平居中
                    align-items: center; //子元素垂直居中
                    display: -webkit-flex;
                }
            }

            .one-column:last-child {
                border-right: solid 1px #ddd;
            }
            .one-column-border {
                border-top: 0px;
            }
        }
        .cell-content-two {
            height: 30px;
            width: 100%;
            /*display: inline-block;*/
            text-align: center;
            /*font-weight: bold;*/
            font-size: 14px;
            color: #000;
            line-height: 30px;
            position: relative;

            .in-div {
                position: absolute;
                bottom: 0px;
                left: 5%;
                height: 200%;
                width: 5%;
                justify-content: center; //子元素水平居中
                align-items: center; //子元素垂直居中
                display: -webkit-flex;
                border: solid 1px #ddd;
                border-bottom: 0px;
            }
            .left-div {
                position: relative;
                /*bottom: 0px;*/
                /*left: 0px;*/
                height: 100%;
                width: 10%;
                background: #acf45e85;
                opacity: 1;
                display: inline-block;
            }
            .right-div {
                position: relative;
                /*bottom: 0px;*/
                /*left: 0px;*/
                height: 100%;
                width: 90%;
                background: #07c160;
                opacity: 1;
                display: inline-block;
                vertical-align: top;
                .open-door {
                    position: absolute;
                    bottom: 0px;
                    width: 11%;
                    height: 28px;
                    font-size: 12px;
                    border: solid 1px #ddd;
                }
            }
        }

        .cell-content-three {
            width: 100%;
            padding-bottom: (100% / 3);
            position: relative;
            /*border: solid 1px yellow;*/
            .three-column-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: flex;
                .three-column {
                    width: (100% / 9);
                    height: 100%;
                    position: relative;
                    /*border: solid 1px yellow;*/
                    .three-column-row {
                        position: relative;
                        justify-content: center; //子元素水平居中
                        align-items: center; //子元素垂直居中
                        display: -webkit-flex;
                        height: (100% / 3);
                        background: #acf45e85;
                        /*border: solid 1px #ddd;*/
                        .three-column-row-eight {
                            width: (100% / 7);
                            position: relative;
                            justify-content: center; //子元素水平居中
                            align-items: center; //子元素垂直居中
                            display: -webkit-flex;
                            height: 100%;
                            border-right: solid 1px #ddd;
                        }
                    }
                    .three-column-row-two {
                        position: relative;
                        justify-content: center; //子元素水平居中
                        align-items: center; //子元素垂直居中
                        display: -webkit-flex;
                        height: (100%);
                        /*border: solid 1px #ddd;*/
                        width: 100%;
                        writing-mode: vertical-lr;
                        background: #07c160;
                    }
                    .three-column-row-three {
                        position: relative;
                        width: 100%;
                        height: (100% / 3 * 2);
                        border: solid 1px #ddd;
                        border-top: 0px;
                        display: -webkit-flex;
                        .three-row-one {
                            position: relative;
                            width: (100% / 7);
                            justify-content: center; //子元素水平居中
                            align-items: center; //子元素垂直居中
                            display: -webkit-flex;
                            border-right: solid 1px #ddd;
                            background: #acf45e85;
                            flex-wrap: wrap;
                            .in-out {
                                border-bottom: solid 1px #ddd;
                                height: 50%;
                                text-align: center;
                                vertical-align: middle;
                            }
                        }
                        .three-row-three {
                            position: relative;
                            width: (100% / 8 * 4);
                            justify-content: center; //子元素水平居中
                            align-items: center; //子元素垂直居中
                            display: -webkit-flex;
                            border-right: solid 1px #ddd;
                            flex-wrap: wrap;
                            .three-row-three-content {
                                position: relative;
                                width: (100% / 3);
                                height: (100%);
                                justify-content: center; //子元素水平居中
                                align-items: center; //子元素垂直居中
                                display: -webkit-flex;
                                border-right: solid 1px #ddd;
                                border-bottom: solid 1px #ddd;
                                border-top: solid 1px #ddd;
                                background: #acf45e85;
                            }
                            .three-row-three-content-border {
                                border-right: 0px;
                            }
                            .avg-bar {
                                width: 5%;
                                height: 90%;
                                background: #fff;
                            }
                            .agv-congent {
                                padding: 5px;
                                height: 80%;
                                width: 100%;
                                boder: solid 1px yellow;
                                display: flex;
                                justify-content: space-between;
                            }
                        }
                    }
                }
                .column-width {
                    width: (100% / 9 * 8);
                }
            }
        }
    }
</style>
